<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <link rel="stylesheet" href="./css/glass.css">
</head>
<body>
    <!-- 第一放大镜 -->
    <div class="container" id="glassone">
        <div class="left">
            <div class="show-box">
                <img src="./image/show_1.jpg" alt="显示图片">
                <div class="mask"></div>
            </div>
            <ul>
                <li class="active" data-index="1"><img src="./image/small_1.jpg" alt=""></li>
                <li data-index="2"><img src="./image/small_2.jpg" alt=""></li>
                <li data-index="3"><img src="./image/small_3.jpg" alt=""></li>
                <li data-index="4"><img src="./image/small_4.jpg" alt=""></li>
            </ul>
        </div>
        <div class="right">
            <img src="./image/big_1.jpg" alt="大背景图">
        </div>
    </div>

    <script src="./js/glassZoom.js"></script>
    <script>
        let glass1= new GlassZoom('#glassone')
        glass1.moveGlass()
        glass1.onTabGlass()
    </script>
    
</body>
</html>